import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
import { WeaErrorPage, WeaLeftRightLayout, WeaTop, WeaRightMenu, WeaRadioGroup, WeaReportCard, WeaEchart,WeaNewScroll,WeaSelect} from "ecCom";
import * as cct from '../../constants/CommonConstant';
import "./style/index.css";

class Report extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            current: '1',
            title:'选项1'
        };
    }

    handleClick = (e) => {
        console.log(e);
        this.setState({
            current: e.key,
            title:e.item.props.children
        });
    }



    render() {
        const leftCom = <WeaNewScroll height='100%'>
            <Menu onClick={this.handleClick}
                style={{ width: 200 }}
                defaultOpenKeys={['1']}
                selectedKeys={[this.state.current]}
                mode="inline"
            >

                    <Menu.Item key="1">合同类型</Menu.Item>
                    <Menu.Item key="2">合同状态</Menu.Item>
                    <Menu.Item key="3">部门统计</Menu.Item>
                    <Menu.Item key="4">人员统计</Menu.Item>

                <SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
                    <Menu.Item key="5">选项5</Menu.Item>
                    <Menu.Item key="6">选项6</Menu.Item>
                    <SubMenu key="sub3" title="三级导航">
                        <Menu.Item key="7">选项7</Menu.Item>
                        <Menu.Item key="8">选项8</Menu.Item>
                    </SubMenu>
                </SubMenu>
                <SubMenu key="sub4" title={<span><Icon type="setting" /><span>导航三</span></span>}>
                    <Menu.Item key="9">选项9</Menu.Item>
                    <Menu.Item key="10">选项10</Menu.Item>
                    <Menu.Item key="11">选项11</Menu.Item>
                    <Menu.Item key="12">选项12</Menu.Item>
                </SubMenu>
                <SubMenu key="sub5" title={<span><Icon type="setting" /><span>导航三</span></span>}>
                    <Menu.Item key="19">选项9</Menu.Item>
                    <Menu.Item key="20">选项10</Menu.Item>
                    <Menu.Item key="21">选项11</Menu.Item>
                    <Menu.Item key="22">选项12</Menu.Item>
                </SubMenu>
                <SubMenu key="sub6" title={<span><Icon type="setting" /><span>导航三</span></span>}>
                    <Menu.Item key="39">选项9</Menu.Item>
                    <Menu.Item key="30">选项10</Menu.Item>
                    <Menu.Item key="31">选项11</Menu.Item>
                    <Menu.Item key="32">选项12</Menu.Item>
                </SubMenu>
                <SubMenu key="sub7" title={<span><Icon type="setting" /><span>导航三</span></span>}>
                    <Menu.Item key="49">选项9</Menu.Item>
                    <Menu.Item key="40">选项10</Menu.Item>
                    <Menu.Item key="41">选项11</Menu.Item>
                    <Menu.Item key="42">选项12</Menu.Item>
                </SubMenu>
            </Menu>
        </WeaNewScroll>;

        const config = [
            {
                label: '日期',
                options: [
                {key:'1',showname:'本年', selected: true},
                {key:'2',showname:'上一年'},
                {key:'3',showname:'指定年份'},
                ],
                domkey: ['dateFrom'],
                selectLinkageDatas: {
                '3': {
                        conditionType: 'DATEPICKER',
                        domkey: ['zdnf'],
                        format:"YYYY"
                    }
                },
                labelcol: 3,
                fieldcol: 9,
            },
            {
                label: '合同性质',
                options: [
                    {key:'0',showname:'全部', selected: true},
                    {key:'1',showname:'收入'},
                    {key:'2',showname:'支出'},
                ],
                    domkey: ['checking'],
                labelcol: 3,
                fieldcol: 9,
            }
        ];

        const option = {
            title: {
                text: '世界人口总量',
                subtext: '数据来自网络'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['2011年', '2012年']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: ['巴西','印尼','美国','印度','中国','世界人口(万)']
            },
            series: [
                {
                    name: '2011年',
                    type: 'bar',
                    data: [18203, 23489, 29034, 104970, 131744, 630230]
                },
                {
                    name: '2012年',
                    type: 'bar',
                    data: [19325, 23438, 31000, 121594, 134141, 681807]
                }
            ]
        };
        const option2 = {
            title : {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        show: true, 
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            series : [
                {
                    name:'数量占比',
                    type:'pie',
                    radius : '55%',
                    center: ['25%', '50%'],
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ]
                },{
                    name:'金额占比',
                    type:'pie',
                    radius : '55%',
                    center: ['75%', '50%'],
                    data:[
                         {value:315, name:'直接访问'},
                        {value:360, name:'邮件营销'},
                        {value:534, name:'联盟广告'},
                        {value:235, name:'视频广告'},
                        {value:118, name:'搜索引擎'}
                    ]
                }
            ]
        };
        const option3 = {
            title : {
                text: '未来一周气温变化',
                subtext: '纯属虚构'
            },
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data:['最高气温','最低气温']
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : ['周一','周二','周三','周四','周五','周六','周日']
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        formatter: '{value} °C'
                    }
                }
            ],
            series : [
                {
                    name:'最高气温',
                    type:'line',
                    data:[11, 11, 15, 13, 12, 13, 10],
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name:'最低气温',
                    type:'line',
                    data:[1, -2, 2, 5, 3, 2, 0],
                    markPoint : {
                        data : [
                            {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name : '平均值'}
                        ]
                    }
                }
            ]
        };

        const option4 = {
            color:[
                
                '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
                '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
                '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
                '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089',
            ],
            title : {
                text: '某地区蒸发量和降水量',
                subtext: '纯属虚构'
            },
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data:['蒸发量','降水量']
            },
            toolbox: {
                show : true,
                feature : {
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
                
            ],
            series : [
                {
                    name:'蒸发量',
                    type:'bar',
                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name:'降水量',
                    type:'bar',
                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                    markPoint : {
                        data : [
                            {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
                            {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name : '平均值'}
                        ]
                    }
                }
            ]
        };
        return (
            <WeaRightMenu>
                <WeaTop
                    loading={false}
                    title={"报表统计"}
                    icon={<i className={cct.icon}/>}
                    iconBgcolor={cct.iconBgcolor}
                    showDropIcon={true}
                    dropMenuDatas={[]}
                    buttons={[]}
                    buttonSpace={10}
                >
                    <WeaLeftRightLayout
                        isNew={true}
                        leftCom={leftCom}
                        onCollapse={showLeft => console.log('showLeft:', showLeft)}
                        leftWidth = {200}
                    >



                        <div className="wea-contract-report">
                            <div className="head">
                                <div>
                                    <span className="icon icon-coms-kpi"></span>
                                    <span className="title">{this.state.title}</span>
                                </div>
                            </div>
                            <div className="content">
                                <WeaNewScroll height='100%' toTop={true}>
                                    <div className="scroll-content">
                                        {/* <WeaRadioGroup config={config} onChange={(params)=> {console.log('params', params)}}/> */}
                                        <div style={{paddingTop:"10px"}}>
                                        <span>
                                            <WeaSelect
                                                options={[{key: "1",showname: "今年",selected: true},{key: "2",showname: "去年"}]}
                                                onChange={(v, showname) => {
                                                    // this.setState({value : v});
                                                    console.log('showname:', showname)
                                                }}
                                                style={{ width: 240 }}
                                            />
                                        </span>
                                        <span style={{paddingLeft:"10px"}}>
                                            <WeaSelect
                                                options={[{key: "1",showname: "收入合同",selected: true},{key: "2",showname: "支出合同"}]}
                                                onChange={(v, showname) => {
                                                    // this.setState({value : v});
                                                    console.log('showname:', showname)
                                                }}
                                                style={{ width: 240 }}
                                            />
                                        </span>
                                        </div>
                                        {/* <WeaReportCard
                                            title={this.state.title}
                                            onMoreClick={v=>console.log('onMoreClick')}
                                            onDownloadClick={v=>console.log('onDownloadClick')}
                                        >

                                            <div style={{height:"500px"}}>
                                                <WeaEchart option={option} useDefault={false}/>
                                            </div>
                                        </WeaReportCard>
                                        <br/>
                                        <WeaReportCard
                                            title={this.state.title}
                                            onMoreClick={v=>console.log('onMoreClick')}
                                            onDownloadClick={v=>console.log('onDownloadClick')}
                                        >
            
                                            <div style={{height:"500px"}}>
                                                <WeaEchart option={option2} useDefault={false}/>
                                            </div>
                                        </WeaReportCard>
                                        <br/>
                                        <WeaReportCard
                                            title={this.state.title}
                                            onMoreClick={v=>console.log('onMoreClick')}
                                            onDownloadClick={v=>console.log('onDownloadClick')}
                                        >
            
                                            <div style={{height:"500px"}}>
                                                <WeaEchart option={option3} useDefault={false}/>
                                            </div>
                                        </WeaReportCard>
                                        <br/> */}
                                        <div style={{paddingTop:"10px"}}>
                                        <WeaReportCard
                                            
                                            title={this.state.title}
                                            onMoreClick={v=>console.log('onMoreClick')}
                                            onDownloadClick={v=>console.log('onDownloadClick')}
                                        >
            
                                            <div style={{height:"500px"}}>
                                                <WeaEchart option={option4} useDefault={false}/>
                                            </div>
                                        </WeaReportCard>
                                        </div>
                                    </div>
                                </WeaNewScroll>
                            </div>
                        </div>
                    </WeaLeftRightLayout>
                </WeaTop>
            </WeaRightMenu>
        );
    }
}

export default Report;